<template>
    <AppHeader title="读写综合" :banAnimate="true" backgroundColor="#ffffff">
      <template #left>
        <img
          @click="onClickLeft"
          src="@/assets/images/icon-back-black.png"
          width="9"
          height="18"
        />
      </template>
      <template #right>
        <img
          @click="onClickRight"
          src="@/assets/images/listening/copy.png"
          width="18"
          height="18"
        />
      </template>
    </AppHeader>
    <div class="container">
      <div class="top">
        <div class="type">选择题</div>
        <div class="num"><span>{{active+1}}</span>/{{datalist.length}}</div>
      </div>
      <div class="swiper-list">
        <div class="list-item" v-for="(item,i) in datalist" :key="i" v-show="i===active">
            <div class="title">{{item.title}}</div>
            <div v-for="(option,idx) in item.option" :key="idx" class="option">
                <span class="unchecked">{{idx===0?'A':idx===1?'B':'C'}}</span>
                <!-- <span class="checked">{{idx===0?'A':idx===1?'B':'C'}}</span> -->
                <span class="option-item">{{option}}</span>
            </div>
        </div>
      </div>
      <div class="btns">
        <div class="btn" @click="prevclick">
          <van-button type="default" block round >上一题</van-button>
        </div>
        <div class="btn" @click="nextclick">
          <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)">下一题</van-button>
        </div>
      </div>
    </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();

const onClickLeft = () => {
  router.back();
};
const onClickRight = () => { 
  router.push('/written/singleTest')
}
const datalist = [
  {
    id: 1,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 2,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 3,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 4,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 5,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 6,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 7,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 1,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 8,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  }
]
const active = ref(0);
const prevclick = () => { 

}
const nextclick = () => { 
  router.push('/writtenTest/singleSubmit')
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #ffffff;
  padding-top: 44px;
  padding-bottom: 100px;
  overflow-y: auto;
  .top{
  
  padding: 15px 10px;
  display: flex;
  align-items: center;
  justify-content:space-between ;
  .type{
    font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  }
  .num{
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;

    line-height: 22px;
    text-align: center;
    font-style: normal;
    span{
      color: #0CB76C;
    }
  }
 }
 .swiper-list{
  .list-item{
    padding: 0 15px;
    .title{
      font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #333333;
line-height: 25px;
text-align: left;
font-style: normal;
    }
    .option{
      margin: 15px 0;
      .checked{
        background: #0CB76C;
        color: #ffffff;
      }
      .unchecked{
        display:inline-block;
        width: 30px;
height: 30px;
border: 1px solid #0CB76C;
border-radius: 50%;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #0CB76C;
text-align: left;
font-style: normal;
text-align: center;
line-height: 28px;
      }
      .option-item{
        font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #8E8E8E;
line-height: 25px;
text-align: left;
font-style: normal;
margin-left: 15px;
      }
    }
  }
 }
 .btns{
  display: flex;
    padding: 30px 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .btn{
      flex:1;
      &:first-child{
        margin-right: 15px;
      }
    }
 }
}
</style>
